<template>
    <div>
      <el-card style="height: 50px" :body-style="{ padding: '10px',height:'10px' }">
        <div class="box-card-div">
          <el-form :inline="true" :model="product"  ref="ruleForm" class="demo-form-inline">
            <el-form-item label="商品名称" prop="name">
              <el-input size="small" v-model="product.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌" prop="brand">
              <el-input size="small" v-model="product.brand" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="是否上架" prop="status">
              <el-select style="width: 100px" size="small" v-model="product.status" placeholder="请选择">
                <el-option label="上架" value="0"></el-option>
                <el-option label="下架" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="success" round size="small" @click="onSearch" icon="el-icon-search">查询</el-button>
              <el-button type="warning" round size="small" @click="resetForm('ruleForm')" icon="el-icon-refresh-left">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div>
        <el-button type="success" round size="mini" @click="uploadExcelDialog = true" icon="el-icon-search">导入</el-button>
        <el-button type="warning" round size="mini" @click="downloadExcel" icon="el-icon-refresh-left">导出</el-button>
      </div>
      <!-- 导入弹出框 -->
       <!--上传execl弹窗-->
    <!--弹窗区域-->
    <el-dialog
    title="上传计量单位数据"
    width="26%"
    :visible.sync="uploadExcelDialog"
    :close-on-click-modal="false">
    <!--上传组件-->
    <el-upload
      class="upload-demo"
      drag
      action=""
      :before-upload="beforeUpload"
      :file-list="filelist"
      :http-request="uploadExcelFun"
      :on-change="handleChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="uploadExcelDialog = false">取 消</el-button>
      <!-- <el-button type="primary" @click="uploadExcelDialog = false">确 定</el-button> -->
    </div>
  </el-dialog>
    <!--添加/更新弹出层-->
    <!--表单校验,1)需要在el-form上设置rules属性和ref属性-->
    <!--2)el-form-item上需要设置prop属性-->
    <!--3)data中需要rules属性,其中的key是prop的值-->
    <el-dialog :title="title" :close-on-click-modal="false" style="margin-left:300px;width: 1000px" :visible.sync="editProductDialog">
        <el-form :model="eidtproduct" label-width="80px" ref="form">
          <el-form-item label="商品名称">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.categoryId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-input size="small" style="width: 300px"  v-model="eidtproduct.brand" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品库存">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.stock" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否上架">
            <el-radio-group v-model="eidtproduct.status">
              <!--此处有:-->
              <el-radio :label="0">上架</el-radio>
              <el-radio :label="1">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetEditForm('eidtproduct')" size="small">取 消</el-button>
          <el-button type="primary" @click="saveUser('eidtproduct')" size="small">确 定</el-button>
        </div>
      </el-dialog>
        <!-- 展示表单代码 -->
        <div>
            <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                prop="name"
                label="商品名称"
            >
            </el-table-column>
            <el-table-column
                prop="categoryId"
                label="分类Id"
            ></el-table-column>
            <el-table-column
                prop="brand"
                label="品牌"
            >
            </el-table-column>
            <el-table-column
                prop="price"
                label="商品价格">
            </el-table-column>
            <el-table-column
                prop="stock"
                label="库存数量"
            ></el-table-column>
            <el-table-column
                prop="status"
                label="上架/下架">
                <template slot-scope="scope">
                    {{ scope.row.status === 0? '上架' : '下架' }}
                  </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'编辑商品')">编辑</el-button>
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'新增商品')">新增</el-button>
                <el-button
                    v-if="scope.row.parentTypeId !== 0"
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
        <div style="display: flex; align-items: center; margin-top: 30px; margin-left: 400px;">
            <el-pagination
                background
                @size-change="handleSizeChange"
                :page-sizes="[3, 6, 9]"
                @current-change="handleCurrentChange"
                :current-page="product.pageNum"
                :page-size="product.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            <el-button style="margin-left: 10px" size="small" type="primary" plain @click="toPage">跳转</el-button>
          </div>
    </div>
</template>

<script>
import {findAll,deleteproduct,addproduct,updateproduct,uploadproduct} from "@/api/product/product.js"
export default {
  name: "products",
  data() {
    return {
      tableData: [],
      eidtproduct: {
        id: null,
        name: null,
        categoryId: null,
        brand: null,
        price: null,
        stock: null,
        status: null
      },
      product: {
        name: null,
        categoryId: null,
        brand: null,
        price: null,
        stock: null,
        status: null,
        pageNum: 1,
        pageSize: 3,
      },
      total: 0,
      editProductDialog: false,
      uploadExcelDialog:false,
      file:null,
      filelist:[],
      title: "新增商品"
    }
  },
  methods: {
    findAll() {
      findAll(this.product)
        .then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
    },
    onSearch(){
      this.findAll()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.product.pageNum = 1;
      this.findAll();
    },
    handleSizeChange(val) {
      this.product.pageSize = val
      this.findAll()
    },
    handleCurrentChange(val) {
      this.product.pageNum = val
      this.findAll()
    },
    toPage(val) {
      this.product.pageNum = val
      this.findAll()
    },
    handleEdit(index, row, title) {
      this.title = title
      if (this.title === "新增商品") {
        this.eidtproduct = {
          id: null,
          name: null,
          categoryId: null,
          brand: null,
          price: null,
          stock: null,
          status: null
        }
      } else {
        this.eidtproduct = {
          id: row.id,
          name: row.name,
          categoryId: row.categoryId,
          brand: row.brand,
          price: row.price,
          stock: row.stock,
          status: row.status
        }
      }
      this.editProductDialog = true
    },
    resetEditForm() {
      this.$refs.form.resetFields()
      this.editProductDialog = false
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '删除用户!', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteproduct(row.id)
          .then(res => {
            if (res.code == 20000) {
              // 弹框
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              // 刷新
              this.product.pageNum = 1;
              this.findAll()
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    saveUser(formName) {
      if (this.title === "新增商品") {
        this.editProductDialog = false
        addproduct(this.eidtproduct)
          .then(res => {
            this.$message({
              type: 'success',
              message: "添加成功"
            })
            this.findAll()
          })
      }else {
        this.editProductDialog = false
        updateproduct(this.eidtproduct)
          .then(res => {
            this.$message({
              type: 'success',
              message: "修改成功"
            })
            this.findAll()
          })
      }
    },
    // 上传excel文件
    beforeUpload(){
      console.log('开始上传，清空上次的文件列表');
      this.filelist = []; // 清空文件列表
      return true;
    },
    // 上传文件方法
    uploadExcelFun(){
      const file = this.file;
      // FormData是js对象,用于存储表单数据
      const formData = new FormData();
      formData.append("file", file); // 由后端接口决定,后端参数叫file
      // 封装的上传文件方法
      uploadproduct(formData)
      .then(res=>{
        this.$message({
          message: "上传成功",
          type: "success",
        });
        // 上传成功后添加到文件列表
        this.filelist.push({
          name: file.name,
        })
        this.uploadExcelDialog = false
        this.product.pageNum = 1
        this.findAll()
    })
    },
    // 监听器
    handleChange(file){
      this.file = file.raw
    },
    // 导出excel
    downloadExcel(){
      this.$confirm('此操作将下载所有商品数据, 是否继续?', '导出商品数据!', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        window.location.href = "http://localhost:8080/product/export"

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        });
      });
    },
  },
  created() {
    this.findAll()
  }
}

</script>

